<template>
<div class="body">
  <div class="main">
    <el-row>
            <el-col :span="24" >
              <!-- <div style="border-bottom: 3px solid skyblue;width:80px"></div> -->
              <el-divider ></el-divider>
                <el-card :body-style="{ padding: '20px'}" class="block" >
                    
                      <el-container>
                        <el-header style="text-align:left;margin-right:15%" height="60px">
                          <el-row >
                            <el-col :span="24"><span><h2>{{reqname}}</h2></span></el-col>
                          </el-row>
                        </el-header>
                        <el-container>
                            <el-aside style="text-align: left; font-size: 13px">
                                <el-divider class="divider-1"></el-divider>
                                <el-col :span="24">
                                <span class="span-p">联系人：</span>{{reqperson}}
                                </el-col>
                                <el-col :span="24">
                                <span class="span-p">联系方式：</span>{{reqcontact}}
                                </el-col>
                                <el-col :span="24">
                                <span class="span-p">联系邮箱：</span>{{reqmail}}
                                </el-col>
                                <el-col :span="24">
                                <span class="span-p">联系地址：</span>{{reqaddr}}
                                </el-col>
                                
                            </el-aside>
                            <el-main style="text-align: left; font-size: 14px;width:300px;margin-left:30px"> 
                                <el-col :span="24"><span class="span-info">初步预算：</span>{{reqcoin}}</el-col>
                                <el-col :span="24"><span class="span-info">发布时间：</span>{{reqdate}}</el-col>
                                <el-col :span="24"><span class="span-info">需求领域：</span>{{reqfield}}</el-col>
                                <el-col :span="24"><span class="span-info">需求行业：</span>{{reqindu}}</el-col>
                                <el-col :span="24"><span class="span-info">需求类别：</span>{{reqtype}}</el-col>
                            </el-main>
                            </el-container>
                            <el-footer style="text-align: left;font-size:14px;font-size:14px;color:#606266">
                              <div style="border-bottom: 2px solid #B3C0D1;width:360px;margin-bottom:10px"></div>
                                <el-col :span="24"><span style="white-space:normal;line-height:21px"><span style="font-size:16px"><i class="el-icon-notebook-1"></i>  需求简介：</span>{{reqbg}}</span></el-col>
                            </el-footer>
                      </el-container>
                </el-card>
                </el-col>
                
                </el-row>
              <el-row class="botblock">
              <el-col :span="12">

                <el-card :body-style="{ padding: '5px'}" class="block-2" >
                    <el-container>
                      <el-header style="text-align: left;" class="el-head">
                        <el-row >
                          <el-col :span="24"><h2><i class="el-icon-edit"></i><span> 待解问题</span></h2></el-col>
                        </el-row>
                      </el-header>
                      
                      <el-footer style="font-size:14px;color:#606266">
                        <el-divider class="divider-1"></el-divider>
                        <el-row>
                          <el-col :span="24" style="text-align:left"><span style="white-space:normal;line-height:20px;font-size:14px">{{reqpb}}</span></el-col>
                        </el-row>
                      </el-footer>
                    </el-container> 
                </el-card>
              </el-col>
              <el-col :span="12">
                <!-- <div class="grid-content bg-purple-light">asd</div> -->
                <el-card :body-style="{ padding: '5px'}" class="block-2" >
                  <el-container>
                    <el-header style="text-align: left;" class="el-head">
                      <el-row >
                        <el-col :span="24"><span ><h2><i class="el-icon-aim"></i> 目标要求</h2></span></el-col>
                      </el-row>
                    </el-header>
                    
                    <el-footer style="font-size:14px;color:#606266">
                      <el-divider class="divider-1"></el-divider>
                        <el-col :span="24" style="text-align:left"><span style="white-space:normal;line-height:20px;font-size:14px">{{reqtarg}}</span></el-col>
                        <!-- <el-col :span="24" style="text-align:left"><div class="text-st"></div><span >{{}}</span></el-col> -->
                    </el-footer>
                  </el-container> 
                </el-card>
              </el-col>
            </el-row>
    </div>
  </div>
</template>

<script scoped>
// import SandTAchievements from "../SandTAchievements.vue"
export default {
  name: 'ReqDetail',
  
  data () {
    return {
      reqname: this.$route.query.reqname,
      reqtype: this.$route.query.reqtype,
      reqfield: this.$route.query.reqfield,
      reqindu: this.$route.query.reqindu,
      reqcoin: this.$route.query.reqcoin,
      reqkw: this.$route.query.reqkw,
      reqbg: this.$route.query.reqbg,
      reqpb: this.$route.query.reqpb,
      reqtarg: this.$route.query.reqtarg,
      reqbelongs: this.$route.query.reqbelongs,
      reqown: this.$route.query.reqown,
      reqaddr: this.$route.query.reqaddr,
      reqperson: this.$route.query.reqperson,
      reqcontact: this.$route.query.reqcontact,
      reqmail: this.$route.query.reqmail,
    }
  },
  created(){
    console.log(this.$route.query)
  },
  
}
</script>

<style scoped>
.body{
    width: 100%;
    background-color: rgb(243, 245, 245);
  }
  .span-p{
    font-size: 15px;
    white-space:normal;
    line-height:50px;
    color: #303133;
  }
  .span-info{
    font-size: 16px;
    color: #303133;
  }
  .divider-1{
    width: 80px;
  }
  
  .botblock{
    width: 820px;
    margin-left:auto;
    margin-right: auto;
    margin-bottom: 1%;
  }
  .main{
    width: 1180px;
    margin-left:auto;
    margin-right: auto;
  }
  .span-info{
    line-height:50px;
  }
  .el-head {
    background-color: #409EFF;
    color: #333;
    line-height: 10px;
  }
  /* .el-row{
    margin-bottom: 10px;
  } */
  .Pmain{
    height: 30px;
  }
  
  .block{
      margin-left: auto;
      margin-right: auto;
      margin-top: 5%;
      width: 810px;
      height: 560px;
      /* border: 1px solid rgb(143, 145, 145); */
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      
  }
  .block-2{
      margin-left: auto;
      margin-right: auto;
      margin-top: 15px;
      margin-bottom: 50px;
      width: 400px;
      height: 420px;
  }
  .EAside{
    height: 400px;
  }
  .card-p{
    margin-right: 0px;
  }
  
</style>

